@mixin waves {
    .animated-button {
        position: relative;
        display: inline-block;
        padding: 15px 32px;
        margin: 4px 2px;
        overflow: hidden;
        font-family: Montserrat, sans-serif;
        font-size: 22px;
        color: #fff;
        text-align: center;
        text-decoration: none;
        letter-spacing: 2px;
        cursor: pointer;
        background-color: #0070ad;
        border: none;
        border-radius: 50px;
        box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
        transition: all 0.3s ease;
    }

    .animated-button::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        content: "";
        background-color: rgb(255 255 255 / 30%);
        border-radius: 50%;
        opacity: 0;
        transition: all 0.5s ease;
        transform: translate(-50%, -50%);
    }

    .animated-button:hover::after {
        width: 210px;
        height: 200px;
        opacity: 1;
    }

    .animated-button:focus {
        outline: none;
    }

    .animated-button:active {
        box-shadow: none;
        transform: translateY(2px);
    }
}
